<!-- 户型推荐 -->
<template>
	<view>
		<u-scroll-list indicatorActiveColor="#dbb70b" indicatorColor="#d2d2d2">
			<view class="scroll-list" style="flex-direction: row;">
				<view
					class="scroll-list__goods-item m-bg-w"
					v-for="(item, index) in code"
					:key="index"
					:class="[index === 9 && 'scroll-list__goods-item--no-margin-right']"
					@click="goback(item.id)"
				>
					<image class="scroll-list__goods-item__image" :src="item.image || df" @click="getpre(item.image)"></image>
					<view class="m-mg-lr" v-if="false">
						<view class="u-flex u-flex-between">
							<text class="scroll-list__goods-item__text" style="font-size: 24rpx;">{{ item.area ? item.area + 'm²' : '' }}</text>
							<text class="scroll-list__goods-item__text u-m-l-15" style="font-size: 24rpx;color: red;" v-if="item.money != '0.00'">约{{ item.money }}万/套</text>
						</view>
						<view class="u-p-b-15 u-p-t-15 u-flex u-flex-between">
							<text>{{ item.bedroom ? item.bedroom + '室' : '' }}</text>
							<!-- <text>|</text> -->
							<text>{{ item.chaoxiang || '' }}</text>
						</view>
					</view>
				</view>
				<!-- <view class="scroll-list__show-more">
						<text class="scroll-list__show-more__text">查看更多</text>
						<u-icon name="arrow-leftward" color="#f56c6c" size="12"></u-icon>
					</view> -->
			</view>
		</u-scroll-list>
	</view>
</template>

<script>
export default {
	name: 'recommendation',
	data() {
		return {};
	},
	props: {
		code: {
			type: Array,
			default: () => []
		}
	},
	methods: {
		goback(id) {
			// this.nextNav('/pages/room/details?id=' + id);
		},
		getpre(img) {
			let imgs = [];
			for (var i = 0; i < this.code.length; i++) {
				imgs.push(this.code[i].image);
			}
			console.log(imgs);
			uni.previewImage({
				urls: imgs
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.scroll-list {
	@include flex(column);

	&__goods-item {
		margin-right: 20px;
		border-radius: 6px;

		&__image {
			width: 170px;
			height: 170px;
			border-top-left-radius: 6px;
			border-top-right-radius: 6px;
		}

		&__text {
			color: black;
			text-align: center;
			font-size: 14px;
			margin-top: 5px;
		}
	}

	&__show-more {
		background-color: #0e5642;
		border-radius: 3px;
		padding: 3px 6px;
		@include flex(column);
		align-items: center;

		&__text {
			font-size: 12px;
			width: 12px;
			color: black;
			line-height: 16px;
		}
	}
}

.c16 {
	color: #daaf7f !important;
	font-size: 20rpx !important;
}

.iconfont {
	width: 73rpx;
	height: 39rpx;
	border-color: #000;
	background: #ababab;
	color: #9b9999;
	background: beige;
	background: #f7eee4;
	border-color: blanchedalmond;
	text-align: center;
}

.m-mg-lr-20 {
	margin-left: 10rpx;
	margin-right: 10rpx;
}
</style>
